#container{
    width: 15rem;
    margin: 0px auto;
    // background-color: yellow;
}


#header{
    width: 15rem;
    height: 3.6rem;
    background-color: #FFDB47;

    display: flex;
    flex-direction: column;
    

    .header-top{
        flex: 1;
        display: flex;
        justify-content: center;
        
        .header-content{
            width: 13.64rem;
            height: 1.76rem;
            // outline: 1px solid red;

            display: flex;
            justify-content: space-between;
            align-items: center;

            .img1,.img3{
                width: .72rem;
                height: 1.2rem;
            }
            .img2{
                width: 7.8rem;
                height: 1.52rem;
            }
            
        }
    }

    /********搜索*************/
    .header-bottom{
        flex: 1;

        display: flex;
        justify-content: center;
        align-items: center;
        .searchBox{
          
            width: 14.04rem;
            height:1.4rem;
            background-color: #fff;
            border-radius: 1rem;
            padding-left: .4rem;

            display: flex;
            align-items:center;

             img{
                width: .8rem;
                height: .8rem;
             }
            input{
                width: 80%;
                height: 80%;

                font-size: .4rem;
                border:none;
                outline:none;
                padding-left: .2rem;
            }
        }
    }

}

#iconBox{
    width: 15rem;

    display: flex;
    flex-direction: column;


    .icon-1,.icon-2{
        flex: 1;
        display: flex;
    
        .icon-item{
           flex:1;
        //    outline:1px solid red;
           padding:0.2rem;

           display: flex;
           flex-direction: column;
           justify-content: center;
           align-items:center;

           img{
            width: 1.68rem;
            height: 1.68rem;
           }
           span{
            font-size: .44rem;
            color: #666666;
           }
        }

    }


}


#big-gif-box{
    width: 15rem;
    img{
        width: 100%;
    }
}

#kong{
    width: 15rem;
    height: .48rem;
    // outline: 1px solid rgb(0, 34, 255);
}
/*大聚会css*/
#two-wrap{
    display: flex;
    width: 15rem;
    justify-content: space-between;
    padding:0px .4rem;


    .left-wrap{
        display: flex;
        flex-direction: column;

        .wrap_1,.wrap_2{
            width: 6.84rem;
            height: 4.2rem;
            // outline: 2px solid red;
            // background-color: yellow;
            background-image:url("../img/166519823350409910.png") ;
            background-repeat: no-repeat;
            background-size: 100%;

            margin-bottom: .4rem;

           display: flex;
            div{
              width: 1.54rem;
              padding-top: .9rem;
              position: relative;
              flex: 1;
              img{
                width:100%;
                height: 90%;
                // outline: 2px solid red;
              }
              span{
                width: .94rem *2 ;
                height: .56rem;
                display: inline-block;
                position: absolute;
                left:50%;
                transform:translate(-50%);
                bottom:4px;
                font-size: 10px;
                background:#FFEBEB;
                color:#FF0000;
                border-radius: .6rem;
                text-align: center;


              }
            }
       
        }
        .wrap_3{
            width: 3.42rem * 2 ;
            height: 4.38rem * 2;
            // outline: 2px solid red;
            border-radius: .2rem;
            position: relative;
           

           .img1{
              width: 100%;
              height: 100%;
              border-radius: .2rem;

           }
           .img2{
               width: 100%;
               border-radius: .2rem;
               position: absolute;
               top:0px;
               left:0px;
           }
        }
      
    }
    .right-wrap{
        // outline: 1px solid red;
        display: flex;
        flex-direction: column;

        .wrap_1,.wrap_2,.wrap_3,.wrap_4{
             width: 3.42rem * 2;
             height: 2.1rem *2;
            //  outline: 1px solid #000;
             padding-top: .9rem;

             display: flex;
             margin-bottom: .4rem;


             div{
               flex:1;
            //    outline:1px solid green;
               position: relative;

               img{
                width:100%;
                height: 90%;
               }
               span.title{
                width: .94rem *2 ;
              
                display: inline-block;
                position: absolute;
                left:50%;
                transform:translate(-50%);
                bottom:.1rem;
                font-size: 10px !important;
             
                background:#FFEBEB;
                color:#FF0000;
                border-radius: .6rem;
                text-align: center;
               }
             }
        }
        .wrap_1{
            background-image: url("../img/167566432517581205.png");
            background-repeat: no-repeat;
            background-size: cover;
        }
        .wrap_2{
            background-image: url("../img/167566488262448825.png");
            background-repeat: no-repeat;
            background-size: cover;
        }
        .wrap_3,.wrap_4{
            background-image: url("../img/168111924474081948.png");
            background-repeat: no-repeat;
            background-size: cover;
            position: relative;
            padding-top: 0px;
        
            div{
                display: flex;
                justify-content: center;
                // outline: 1px solid red;
                position: relative;
               
              span.h-title{
                display: inline-block;
                position: absolute;
                margin-top: .1rem;
                color:#fff;
                font-size: 10px;
                // outline: 1px solid green;
            }

                img{
                    width: 1.2rem *2;
                    height: 2.4rem;
                    margin-top: 1rem;
                }
                span.title{
                     width: 2.1rem;
                     height: .5rem !important;
                    position: absolute;
                    bottom:.2rem;
                    
                    background-image: url("../img/165579757384647358.png");
                    background-repeat: no-repeat;
                    background-size:100%;
                    border-radius: 0px;
                    font-size: .2rem!important;
                    color:#fff;
                    background-color: transparent;
                    
                }
               
            }

          
        }
    }
}

/*猜你喜欢模块*/
#cai_box{
    width: 15rem;
    height: 1.12rem;
    padding: 0px 0.4rem 0px;
    // outline: 1px solid red;

    img{
        width: 100%;
        height: 100%;
    }
}

/* 商品列表*/
#pro-list{
    padding: 0rem 0.4rem;
    // outline: 1px solid red;
    // background-color: yellowgreen;

    display: flex;
    justify-content: space-between;

    .left-list,.right-list{
        width: 3.42rem *2;
        // outline: 1px solid rgb(56, 12, 252);

        
        /*商品列表中的每个商品 */
        .goods-item{
             display: flex;
             flex-direction: column;
             background-color: #fff;

            padding-bottom: 0.4rem;
             

            img{
                width: 100%;
            }
            p.pro-title{
                width: 3.18rem *2;
                height: 0.67rem *2;
                 font-size: .2rem;
                 margin: 9px*2 6px*2 0px;
                 line-height: 0.68rem;
                //  background-color: yellowgreen;

                 /*超出部分隐藏*/
                 overflow: hidden;
                 /*文本超出省略 ...*/
                 text-overflow:ellipsis;

                /*垂直显示2行*/
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;

                display: -webkit-box;
                font-weight: bold;
            }
            p.cuxiao-tag{
                margin: .12rem *2;
                // outline: 1px solid red;
                height: .8rem;
                line-height: .8rem;
                .tap{
                    margin: 0px .1rem;
                    border:1px solid #FFBB00;
                    font-size: .48rem;
                    padding: 0 .12rem;
                }
            }
            p.pro-price{
                display: flex;
                align-items: start;

                
                .price-now{
                    font-size: 0.72rem;
                    line-height: 0.72rem;
                    font-weight: bold;
                    color:#ff4422;
                }
                .price-comments{
                    font-size: 0.4rem;
                    margin-left: 0.26rem;
                    color:#999;
                }
            }
          
            
        }
    }
  
}

#footer{
   width: 15rem;
   background-color: #ccc;

    position:fixed;
    bottom:0px;
    left:50%;
    transform: translate(-50%);
  
    .top_img_box{
          width: 100%;
          height: 1.8rem;
        //   background-color: #ff4422;
          img{
            width: 100%;
          }
    }
    .tabBar{
        display: flex;
        padding: .2rem 0rem;

        div{
            flex: 1;
            // outline: 1px solid red;

            display: flex;
            flex-direction:column;
            justify-content: center;
            align-items: center;
            
            img{
                width: .96rem;
            }
            span{
                font-size:.32rem;
            }
            span.active{
                font-weight: bold;
            } 
        }
    }
}
